<template>
  <view class="simple-setting-card" @click="openDraw">
    <view class="setting-name" :style="nameCustomStyle">{{ name }} </view>
    <view class="setting-box">
      <view class="setting-value">
        <text :style="valueCustomStyle">{{ value }}</text>
        <text v-if="unit">{{ unit }}</text>
      </view>
      <image class="arrow-right" src="/static/ic_right_arrow.png" />
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  name: string
  value: string | number
  unit?: string | undefined
  nameCustomStyle?: string
  valueCustomStyle?: string
}>()
const emit = defineEmits<{
  (e: 'click', event: Event): void
  (e: 'openTips'): void
}>()

function openDraw(e: any) {
  emit('click', e)
}
</script>

<style lang="less">
.simple-setting-card {
  height: 108rpx;
  padding: 0 40rpx 0 32rpx;
  box-sizing: border-box;
  background-color: #f4f4f6;
  margin-bottom: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .setting-name {
    font-weight: 600;
    font-size: 40rpx;
    color: var(--dark-color);
    display: flex;
  }
  .setting-box {
    display: flex;
    align-items: center;
    .setting-value {
      font-weight: 600;
      font-size: 36rpx;
      color: var(--dark-color);
    }
    .arrow-right {
      width: 16rpx;
      height: 28rpx;
      margin-left: 24rpx;
    }
    .setting-icon {
      width: 28rpx;
      height: 28rpx;
      padding-left: 6rpx;
    }
  }
}
.is-simple-setting-disabled {
  opacity: 0.6;
}
</style>
